<template>
  <div id="register" v-title data-title="注册 - 码神之路">
    <!--<video preload="auto" class="me-video-player" autoplay="autoplay" loop="loop">
          <source src="../../static/vedio/sea.mp4" type="video/mp4">
      </video>-->

    <div class="me-login-box me-login-box-radius">
      <h1>用户中心</h1>

      <el-form ref="userForm" :model="userForm" :rules="rules">

        <el-form-item prop="account">
            <img @click="headFormVisible = true" :src="userForm.avatar" class="me-header-picture"/>
        </el-form-item>

        <el-form-item prop="account">
        账号
          <el-input placeholder="用户名" v-model="userForm.account" disabled class="me-login-input"></el-input>
        </el-form-item>

        <el-form-item prop="nickname">
            昵称
          <el-input placeholder="昵称" v-model="userForm.nickname" class="me-login-input"></el-input>
        </el-form-item>

        <el-form-item prop="email">
            邮箱
          <el-input placeholder="邮箱" v-model="userForm.oldEmail" disabled class="me-login-input"></el-input>
        </el-form-item>

        <el-form-item prop="phone">
            电话
          <el-input placeholder="电话" v-model="userForm.mobilePhoneNumber" class="me-login-input"></el-input>
        </el-form-item>


        <el-form-item size="small" class="me-login-button">
          <el-button type="primary" @click="update()">修改</el-button>
        </el-form-item>

        
      </el-form>
          <el-button type="text" @click="emailFormVisible = true">修改邮箱</el-button>
          <el-button type="text" @click="pwdFormVisible = true">修改密码</el-button>
      <el-row>

      </el-row>

      <el-dialog title="修改邮箱" :visible.sync="emailFormVisible" >
          <el-form :model="form">
            <el-form-item label="新邮箱" :label-width="formLabelWidth">
              <el-input v-model="userForm.oldEmail" autocomplete="off" ></el-input>
            </el-form-item>
            
            
            <el-form-item prop="code">
              <el-input placeholder="验证码" v-model="userForm.code" style="width:120px;margin-right:20px;"></el-input>
              <el-button type="success" @click="getCode()">获取邮箱验证码</el-button>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer" >
            <el-button @click="emailFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="update()">确 定</el-button>
          </div>
        </el-dialog>
  
        <el-dialog title="修改密码" :visible.sync="pwdFormVisible" >
          <el-form :model="form">
            <el-form-item label="旧密码" :label-width="formLabelWidth" >
              <el-input v-model="userForm.oldPassword" type="password" autocomplete="off"></el-input>
            </el-form-item>
            
            
            <el-form-item label="新密码" :label-width="formLabelWidth">
              <el-input v-model="userForm.password" type="password" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="重复密码" :label-width="formLabelWidth">
              <el-input v-model="userForm.password2" type="password" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="pwdFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="update()">确 定</el-button>
          </div>
        </el-dialog>

        <el-dialog title="修改头像" :visible.sync="headFormVisible" >
          <el-form :model="form">
            <el-upload
                name="image"
                class="avatar-uploader"
                action="http://localhost:8888/uploads"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="userForm.avatar" :src="imgUrl" class="me-header-picture">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="headFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="update()">确 定</el-button>
          </div>
        </el-dialog>

    </div>
  </div>
</template>

<script>
  import {update} from '@/api/login'
  import {getCheckCode} from '@/api/email'

  export default {
    name: 'Register',
    data() {
      return {
        emailFormVisible: false,
        pwdFormVisible: false,
        headFormVisible: false,
        imgUrl: '',
        userForm: {
          account: '',
          nickname: '',
          oldPassword: '',
          password: '',
          password2: '',
          email: '',
          oldEmail: '',
          code: '',
          mobilePhoneNumber: '',
          avatar: '',
          admin: '',
        },
        rules: {
          account: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
            {max: 16, message: '[6,16]个字符', trigger: 'blur'}
          ],
          nickname: [
            {required: true, message: '请输入昵称', trigger: 'blur'},
            {max: 12, message: '不能大于12个字符', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {max: 16, message: '[6,16]个字符', trigger: 'blur'}
          ],
          code: [
            {required: true, message: '请输入验证码', trigger: 'blur'},
            {max: 6, message: '6位数字', trigger: 'blur'}
          ],
          email: [
            {required: true, type: 'email', message: '请输入邮箱', trigger: 'blur'},
            {max: 64, message: '不能大于64个字符', trigger: 'blur'}
          ]
        }

      }
      
    },
    computed: {
      user() {
        let login = this.$store.state.account.length != 0
        let avatar = this.$store.state.avatar
        let admin = this.$store.state.admin
        let account = this.$store.state.account
        let nickname = this.$store.state.nickname
        let email = this.$store.state.email
        let mobilePhoneNumber = this.$store.state.phone
        return {
          login, avatar, admin, account, nickname, email, mobilePhoneNumber
        }
      }
    },
    created(){

      if(this.user.login == false){
        this.$router.push({path: '/'})
      }else{
        this.userForm.account = this.user.account
        this.userForm.nickname = this.user.nickname
        this.userForm.email = this.user.email
        this.userForm.oldEmail = this.user.email
        this.userForm.mobilePhoneNumber = this.user.mobilePhoneNumber
        this.userForm.admin = this.user.admin
        this.userForm.avatar = this.user.avatar
        this.imgUrl = this.user.avatar
      }
 
    },
    methods: {
      update(){

        let p1 = this.userForm.password;
        let p2 = this.userForm.password2;
        if(p1 !== p2){
          that.$message({message: '两次密码不一致', type: 'error', showClose: true});
          return;
        }
        if(this.userForm.oldEmail != null && this.userForm.oldEmail.length > 0){
          this.userForm.email = this.userForm.oldEmail
        }
        
        let that = this
        update(this.userForm).then(data => {
          
          that.$message({message: '修改成功，三秒后自动退出，请重新登录！', type: 'success', showClose: true});
          //that.$router.push({path: '/'})
          that.pwdFormVisible = false
          that.emailFormVisible = false
          that.headFormVisible = false
          setTimeout(() => {
            that.toLogout()
          }, 3000);
          //that.toLogout()
        }).catch(error => {
          if (error !== 'error') {
            that.$message({type: 'error', message: '修改失败!', showClose: true})
          }
        })
        
      },
      getCode(){
        let that = this
        this.userForm.email = this.userForm.oldEmail
        getCheckCode(this.userForm.email).then(data => {
          that.$message({message: '发送成功，请耐心等待并关注邮箱！', type: 'success', showClose: true});
        }).catch(error => {
          that.$message({message: error, type: 'error', showClose: true});
        })
      },
      toLogout() {
        let that = this
        this.$store.dispatch('logout').then(() => {
          this.$router.push({path: '/'})
        }).catch((error) => {
          if (error !== 'error') {
            that.$message({message: error, type: 'error', showClose: true});
          }
        })
      },
      handleAvatarSuccess(res, file) {
        //this.dialogForm.image = URL.createObjectURL(file.raw);
        this.imgUrl = res.data
        if(this.imgUrl != null && this.imgUrl.length > 0){
          this.userForm.avatar = this.imgUrl
        }
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        // if (!isJPG) {
        //   this.$message.error('上传头像图片只能是 JPG 格式!');
        // }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        //return isJPG && isLt2M;
        return isLt2M;
      },

    }
  }
</script>

<style scoped>
  #login {
    min-width: 100%;
    min-height: 100%;
  }

  .me-video-player {
    background-color: transparent;
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    position: absolute;
    left: 0;
    z-index: 0;
    top: 0;
  }

  .me-login-box {
    position: absolute;
    width: 350px;
    height: auto;
    background-color: white;
    margin-top: 20px;
    margin-left: -180px;
    left: 50%;
    padding: 30px;
    
  }

  .me-login-input{
      width: 300px;
      float: right;
  }

  .me-login-box-radius {
    border-radius: 10px;
    box-shadow: 0px 0px 1px 1px rgba(161, 159, 159, 0.1);
  }

  .me-login-box h1 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
    vertical-align: middle;
  }

  .me-login-design {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
  }

  .me-login-design-color {
    color: #5FB878 !important;
  }

  .me-login-button {
    text-align: center;
  }

  .me-login-button button {
    width: 100%;
  }

  .me-header-picture {
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
    border-radius: 50%;
    vertical-align: middle;
    background-color: #5fb878;
    object-fit: contain;
    margin-left: 130px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
